<template lang="pug">
  div
    el-row
      el-tag(type="info").mr-2 展示列配置:
      el-button.float-right(@click="add") 添加
    el-table(border :data="value")
      el-table-column(label="表头")
        template(slot-scope="scope")
          el-input.readonly-input(v-model="scope.row.label" :title="scope.row.label" readonly=true)
      el-table-column(label="绑定值" width="100")
        template(slot-scope="scope")
          el-input.readonly-input(v-model="scope.row.value" :title="scope.row.value" readonly=true)
      el-table-column(label="类型" width="120")
        template(slot-scope="scope")
          el-select(v-model="scope.row.type" placeholder="请选择类型" @change="typeChange(scope.row)")
            el-option(v-for="item in types" :key="item.value" :label="item.label" :value="item.value")
      el-table-column(label="操作" width="240")
        template(slot-scope="scope")
          el-button.page-table-icon-btn(@click="value.splice(scope.$index,1)" size="mini" icon="el-icon-delete" title="删除")
          el-button.page-table-icon-btn(@click="editConfig(scope.$index,scope.row.type, scope.row.config)"  size="mini" icon="el-icon-tickets" title="类型详情")
          el-button.page-table-icon-btn(@click="prev(scope.$index)" size="mini" icon="el-icon-upload2" :disabled="scope.$index==0?true:false" title="上移")
          el-button.page-table-icon-btn(@click="next(scope.$index)" size="mini" icon="el-icon-download" :disabled="scope.$index==value.length-1?true:false" title="下移")
    el-dialog.table-list-config-dialog(:visible.sync="dialogVisible" :title="dialogTitle" :close-on-click-modal="false" :modal-append-to-body="false")
      json-form(ref="jsonForm" v-if="dialogVisible" :device="device" :value="dialogJsonFormValue" :config="dialogJsonFormConfig" :cloneValue = "false")
      .text-center(slot="footer")
        el-button(size="small" @click="dialogVisible = false") 取 消
        el-button(size="small" type="primary" @click="dialogSubmit") 确 定
</template>
<script>
import inputInitConfigDataFn from '../../input/common/initConfigDataFn.js'
import selectInitConfigDataFn from '../../select/common/initConfigDataFn.js'
import dateInitConfigDataFn from '../../date/common/initConfigDataFn.js'
import radioInitConfigDataFn from '../../radio/common/initConfigDataFn.js'
import textInitConfigDataFn from '../../../meta/text/common/initConfigDataFn.js'

import inputConfig from '../../input/common/config'
import selectConfig from '../../select/common/config'
import dateConfig from '../../date/common/config'
import radioConfig from '../../radio/common/config'
import textConfig from '../../../meta/text/common/config'

import jsonForm from '../../../../../../../../common/components/myForm/jsonForm'
import { openDialog } from '../../../../../../../../common/components/jsDialog/jsDialog'
import _ from "lodash"
export default {
  props: ['value'],
  inject: ['operaTemplateRoot'],
  components:{jsonForm},
  data() {
    return {
      types: [
        { label: '文本', value: 'text' },
        { label: '输入框', value: 'input' },
        { label: '下拉框', value: 'select' },
        { label: '单选', value: 'radio' },
        { label: '时间日期', value: 'date' },
      ],
      initConfigDataFnList: {},
      configList: {},

      dialogVisible:false,
      dialogIndex:undefined,
      device:undefined,
      dialogTitle:"",
      dialogJsonFormValue:undefined,
      dialogJsonFormConfig:undefined
    }
  },
  created() {
    const deleteLabel = (obj) => {
      obj.label = ''
      return obj
    }
    this.initConfigDataFnList = {
      select: deleteLabel(selectInitConfigDataFn()),
      input: deleteLabel(inputInitConfigDataFn()),
      date: deleteLabel(dateInitConfigDataFn()),
      radio: deleteLabel(radioInitConfigDataFn()),
      text: deleteLabel(textInitConfigDataFn())
    }
    this.configList = { select: selectConfig, input: inputConfig, date: dateConfig, radio: radioConfig, text: textConfig }
  },
  methods: {
    add() {
      this.value.push({
        label: '',
        value: this.initConfigDataFnList.input.propertyName,
        type: 'input',
        config: this.initConfigDataFnList.input,
        width: ''
      })
    },
    prev(index) {
      var item = this.value[index]
      this.value[index] = this.value[Number(index - 1)]
      this.value[Number(index - 1)] = item
      this.$emit('input', [...this.value])
    },
    next(index) {
      var item = this.value[index]
      this.value[index] = this.value[Number(index + 1)]
      this.value[Number(index + 1)] = item
      this.$emit('input', [...this.value])
    },
    dialogSubmit(){
      this.$refs.jsonForm.validate().then(()=>{
        this.value[this.dialogIndex].config = this.dialogJsonFormValue
        this.value[this.dialogIndex].value = this.dialogJsonFormValue.propertyName || ''
        this.value[this.dialogIndex].label = this.dialogJsonFormValue.label
        this.dialogVisible = false
      },()=>{
        this.$message.error("输入信息有误")
      })
    },
    editConfig(index, type, config) {
      // this.dialogVisible = true
      this.device = this.operaTemplateRoot.designDeviceChoose
      this.dialogTitle = type
      this.dialogIndex = index
      this.dialogJsonFormValue = _.cloneDeep(Object.assign(config, { noFilter: true,labelHidden:true }))
      // this.dialogJsonFormValue
      this.dialogJsonFormValue.label = config.label
      this.dialogJsonFormConfig = this.configList[type]
      this.dialogVisible = true
    },
    typeChange(row) {
      row.config = this.initConfigDataFnList[row.type]
      row.value = row.config.propertyName || ''
    }
  }
}
</script>
<style lang="scss">
.table-list-config-dialog{
  .el-dialog{
    .el-dialog__body{
      .el-collapse-item{
        border-left:1px solid #ebeef5;
        border-right:1px solid #ebeef5;
      }
    }
  }
}
</style>
